<template>
  <div>
    <h2 style="margin-left: 10px">医院设置</h2>
    <p>
      <el-form :inline="true" :model="paramlist" class="demo-form-inline" style="margin-left: 10px">
        <el-form-item label="医院名称">
          <el-input v-model="paramlist.hosname" placeholder="医院名称"></el-input>
        </el-form-item>
        <el-form-item label="医院编号">
          <el-input v-model="paramlist.hoscode" placeholder="医院编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onCheckSubmit">查询</el-button>
        </el-form-item>

      </el-form>

    </p>
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="hosname"
        label="医院名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="hoscode"
        label="医院编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="apiUrl"
        label="api基础路径"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contactsName"
        label="联系人姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contactsPhone"
        label="联系人手机"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger" style="margin-left:10px ;" @click="muchDeleteHosp">批量删除</el-button>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="paramlist.pages*10"
        @current-change="cutoverPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import hp from "@/api/hospital";

export default {
  data() {
    return {
      //查询出来的数据集合
      tableData: [],
      paramlist: {
        pageindex: 1,
        pagesize: 4,
        hosname: "",
        hoscode: "",
        pages: 5
      },
      multipleSelection: [],
      loading: true
    }
  },
  created() {
    this.gethp()
  },
  methods: {
    gethp() {
      // console.log("进入方法")
      // console.log("进入方法"+this.paramlist)
      hp.HospitalAdd({
        pageindex: this.paramlist.pageindex,
        pagesize: this.paramlist.pagesize,
        hosname: this.paramlist.hosname,
        hoscode: this.paramlist.hoscode
      }).then(response => {
        console.log(response)
        // console.log(response.data.pages)
        this.loading=false
        this.paramlist.pages = response.data.pages
        this.tableData = response.data.records
        // alert("返回数据成功" + response)
      }).catch(error => {
        console.log(error)
      })

    },
    //修改
    handleEdit(index, row) {
      // console.log(index, row);//可以获取当前数据下标，和对应的数据
      this.$router.push({
        path: '/admin/update', //路劲，跳转视图的路劲
        query: {row} //query可以替换为params(传递字符串)，而query是传递对象
      })

    },
    //删除
    handleDelete(index, row) {
      // console.log(index, row);
      hp.Hospdelete({ids: [row.id]}).then(response => {
        this.gethp()
        this.$message({
          type: 'success',
          message: '删除成功！ '
        });
      }).catch(error => {
        console.log(error)
      })
    },
    onCheckSubmit() {
      console.log('submit!');
      this.gethp()
    },
    cutoverPage(pageindex) {
      this.paramlist.pageindex = pageindex
      this.gethp()
    },
    //获取多选的信息
    handleSelectionChange(val) {
      // console.log(val.length)
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        // console.log()
        const id = val[i].id
        this.multipleSelection.push(id)
      }
      console.log(this.multipleSelection)
    },
    // 批量删除
    muchDeleteHosp() {
      console.log("---multipleSelection--")
      console.log(this.multipleSelection)
      hp.Hospdelete({ids: this.multipleSelection}).then(this.gethp).catch(error => {
        console.log(error)
      })
    }
  }

}
</script>

<style>
.block {
  float: right;
}
</style>
